import { useLayoutEffect, useState } from 'react';
import { Mask } from 'antd-mobile';
import clsx from 'clsx';
import './index.less';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, Space, Toast } from 'antd-mobile'
import { GameRulesMaskState } from '../../../state';
import { useRecoilState } from 'recoil';

const ProvablyMask: React.FC = () => {
  const [gameRulesMaskState, setRoundDetailMaskState] = useRecoilState(GameRulesMaskState);
  return (
    <Mask
      opacity={0.8}
      visible={gameRulesMaskState}
      onMaskClick={() => setRoundDetailMaskState(false)}
    >
      <div
        className="ProvablyMask"
      >
        <div className="titleBox">
          ABOUT PROVABLY FAIR
          <i className="icon" onClick={() => { setRoundDetailMaskState(false) }}></i>
        </div>
        <div className="content">
          <div className="head-icon">
            <div className="head-icon__inner">
              <div className="head-logo"></div>
            </div>
          </div>
          <p> This game is based on cryptographic technology called "Provably Fair". This technology guarantees 100% fairness of game result. With this technology, it's impossible for any third party to interfere in the game process.</p>
          <hr />
          <h4> HOW IT WORKS </h4>
          <p> Result of each round (The position of mines) is generated when game start, the encrypted data has been sent to players and it is fully transparent. This way, it's impossible for anyone to manipulate game output. Also, anyone can check and confirm game fairness. </p>
          <div className="box">
            <div className="box__head">
              <div className="box__icon">
                <div className="iconServer1">

                </div>
              </div>

              <div className="box__title"> Original Seed:  </div>
            </div>
            <span className="box__code">vjdJf9wvaKoZzyhYpfGfvNyVP6cvdKqEUqeu0gOX</span>
            <div className="box__text"></div>
          </div>
          <span className="char">↓</span>
          <div className="box">
            <div className="box__head">
              <div className="box__icon">
                <div className="iconServer2"></div>
              </div><div className="box__title"> Seed data encrypted by SHA256: </div>
            </div><span className="box__code">ebdded24c7f04dd3bf90284e42ad8fa3d22c2e5aed3b0c1c171c87d22f0cdd46</span>
            <div className="box__text"></div>
          </div>
          <span className="char">↓</span>
          <div className="box">
            <div className="box__head">
              <div className="box__icon">
                <div className="iconServer3"></div>
              </div><div className="box__title"> The position of mines:  </div>
            </div><span className="box__code"> 0000010000000001010000000 </span><div className="box__text"><p>0 represents stars, 1 represents landmines</p></div>
          </div>
          <span className="char">↓</span>
          <div className="box">
            <div className="box__head">
              <div className="box__icon">
                <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g fill="#FFF" fillRule="nonzero">
                    <path d="M29.227 21.788a.586.586 0 0 0-.72.41 9.043 9.043 0 0 1-8.702 6.63c-4.785 0-8.711-3.744-9.005-8.456 5.141-.302 9.27-4.431 9.572-9.573 3.807.24 7.102 2.884 8.13 6.592a.586.586 0 0 0 1.129-.313 10.264 10.264 0 0 0-3.603-5.349 10.083 10.083 0 0 0-5.654-2.104C20.078 4.268 15.626 0 10.195 0 4.574 0 0 4.574 0 10.195c0 5.43 4.268 9.883 9.626 10.18C9.922 25.731 14.374 30 19.805 30c4.578 0 8.622-3.08 9.832-7.492a.586.586 0 0 0-.41-.72zm-18.425-2.59c.3-4.493 3.903-8.096 8.396-8.396-.3 4.493-3.903 8.096-8.396 8.396zm-9.63-9.003c0-4.975 4.048-9.023 9.023-9.023 4.785 0 8.711 3.744 9.005 8.456-5.141.302-9.27 4.431-9.572 9.572-4.712-.294-8.456-4.22-8.456-9.005z"></path>
                    <path d="M19.21 22.729a.586.586 0 0 0 .585-.586v-1.33l3.15 3.15a.586.586 0 0 0 .829-.829l-3.15-3.15h1.323a.586.586 0 1 0 0-1.171h-2.738a.592.592 0 0 0-.585.586v2.744c0 .323.262.586.585.586zM10.54 11.315a.592.592 0 0 0 .586-.586V7.985a.586.586 0 1 0-1.172 0v1.33l-3.15-3.15a.586.586 0 0 0-.83.828l3.151 3.15H7.803a.586.586 0 1 0 0 1.172h2.737zM29.988 19.69a.59.59 0 0 0-.688-.46.59.59 0 0 0-.46.689.59.59 0 0 0 .688.46.59.59 0 0 0 .46-.689z"></path>
                  </g>
                </svg>
              </div><div className="box__title">Original Seed plus game result characters</div>
            </div><span className="box__code"> vjdJf9wvaKoZzyhYpfGfvNyVP6cvdKqEUqeu0gOX0000010000000001010000000 </span><div className="box__text"><p> The ciphertext of the game result is obtained by using the seed data plus the characters of the result (The position of mines), and then doing SHA256 encryption. </p></div>
          </div>
          <span className="char">↓</span>
          <div className="box">
            <div className="box__head">
              <div className="box__icon">
                <svg width="23" height="30" viewBox="0 0 23 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <g fill="#FFF" fillRule="nonzero">
                    <path d="M19.189 2.037h-4.822a3.416 3.416 0 0 0-6.25 0H3.294A3.299 3.299 0 0 0 0 5.332v21.373A3.299 3.299 0 0 0 3.295 30h15.894a3.299 3.299 0 0 0 3.294-3.295V5.332a3.299 3.299 0 0 0-3.294-3.295zm-10.53 1.5a.75.75 0 0 0 .732-.59c.184-.838.963-1.447 1.85-1.447.889 0 1.667.61 1.851 1.448a.75.75 0 0 0 .733.589h1.487v.658a1.797 1.797 0 0 1-1.795 1.795H8.966a1.797 1.797 0 0 1-1.795-1.795v-.658H8.66zm12.324 23.168c0 .991-.804 1.794-1.794 1.795H3.295c-.991 0-1.794-.804-1.795-1.795V5.332a1.797 1.797 0 0 1 1.795-1.795H5.67v.658A3.299 3.299 0 0 0 8.966 7.49h4.551a3.298 3.298 0 0 0 3.295-3.295v-.658h2.377c.99.001 1.793.804 1.794 1.795v21.373z"></path>
                    <path d="m14.954 13.857-4.924 4.808-2.5-2.44a.75.75 0 0 0-1.058 1.063l.01.01 3.024 2.952a.75.75 0 0 0 1.048 0L16 14.931a.75.75 0 0 0-1.047-1.073z"></path>
                  </g>
                </svg>
              </div><div className="box__title"> Result data (encrypted by SHA256)</div>
            </div><span className="box__code"> 1a2e3d817451d19c1f49c6d13229490fb5ba1f8c4705e84b217b725a1dfd9845 </span><div className="box__text"></div>
          </div>
          <p> The correctness of encryption results can be checked through online encryption websites, such as
            <button className="btn-site">
              https://www.miniwebtool.com/sha256-hash-generator/
            </button>
          </p>
        </div>
      </div>
    </Mask>
  );
};

export default ProvablyMask;
